<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>GMap Window Example</title>
    <link rel="stylesheet" type="text/css" href="js/extjs22/resources/css/ext-all.css" />

    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="js/extjs22/adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->

    <script type="text/javascript" src="js/extjs22/ext-all.js"></script>

  <script type="text/javascript" src="http://www.google.com/jsapi?hl=en&key=ABQIAAAANX1UEkx5va-B8I-VAyZHdxRANBwFBV5lvn06w6VGRDTtcJKhxhSlzG5tM-rohRx2QpF9STfBXsDMGQ"></script>

  <link rel="stylesheet" type="text/css" href="css/index.css" />
  <script type="text/javascript" src="js/math3d.js"></script>
  <script type="text/javascript" src="js/blamDoInit.js"></script>
  <script type="text/javascript" src="js/blam.js"></script>
  <script type="text/javascript" src="js/policecar.js"></script>

    <script src="js/blamGMapPanel.js"></script>
    <script src="js/GE_GM_Integration.js"></script>
    <script type="text/javascript">


	// <![CDATA[
	


	

	// defines boolean variables
	var geInitialised = false;
	var gmInitialised = false;

    // defines which mode the GE plugin is in
    var currentMode = "FLYMODE";

	var carMarkerOnMap;

    function reposPolicecarToMelbourne() {
        if (ge == null) alert("ge is null");
        else if (currentMode == "FLYMODE"){
            policecar = new Policecar();
            currentMode = "DRIVEMODE";
        }
    }

    function synchGE() {
        //alert("map dragend");
	if (ge != null) {
        var conTangent2 = parseFloat(2.95074418222186 * 0.000001);
        var gmCentre, gmBounds, gmSouthWest, gmNorthEast, height, width, geLookAt;
        
        gmCentre = map.getCenter();
        gmBounds = map.getBounds();

        gmSouthWest = gmBounds.getSouthWest();
        gmNorthEast = gmBounds.getNorthEast();
        height = gmNorthEast.lat() - gmSouthWest.lng();
        width = gmNorthEast.lng() - gmSouthWest.lng();
        
        // set ge view from gm
        var geRange = width / (2 * conTangent2);

        geLookAt= ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
        geLookAt.setLatitude(gmCentre.lat());
        geLookAt.setLongitude(gmCentre.lng());
        geLookAt.setRange(geRange);
        geLookAt.setTilt(0);
        geLookAt.setHeading(0);

        ge.getView().setAbstractView(geLookAt);
	}
    }

    function delPoliceCar() {
      if (currentMode == "DRIVEMODE") {
        google.earth.removeEventListener(ge, "frameend", updateViewScene);
        ge.getFeatures().removeChild(policecar.placemark);
        ge.getFeatures().removeChild(policecar.shadow);
        policecar = null;
        map.removeOverlay(carMarkerOnMap);
        currentMode = "FLYMODE";
      }
        synchGE();
    }

	// ]]>
      function init() {
	document.getElementById("show-ge-btn").click();
	document.getElementById("show-gm-btn").click();
	
	map = mapwin.findById("mapPanel").getMap();
	//alert(map);
	map.setCenter(new GLatLng(-37.817478, 144.963226), 16);
	

      }

      function showMapProp() {
        var map = mapwin.findById("mapPanel").gmap;
        
      	alert("Zoomlevel:" + map.getZoom() + "\n"
      			+ "Height:" + map.getSize().height + "\n"
      			+ "Width:" + map.getSize().width);
      
      }
    </script>

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />

    <style type="text/css">
    .x-panel-body p {
        margin:10px;
        font-size:12px;
    }
    </style>
</head>
<body onload="init();" onunload="GUnload();">
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->


<input type="button" id="show-ge-btn" value="Toggle GEarth Window" class="x-panel-body" />
<input type="button" id="show-gm-btn" value="Toggle GMaps Window" class="x-panel-body" />

<div id="controlsDiv">
<table valign="center">
	  <tr>
	    <td></td>

	    <td><input type=button class="button medw" onmousedown="gasButtonDown=true;" onmouseup="gasButtonDown = false;" value="gas"></td>
	    <td></td>
	  </tr>
	  <tr>
	    <td><input type=button class="button medw" onmousedown="leftButtonDown=true;" onmouseup="leftButtonDown=false;" value="left"></td>
	    <td></td>
	    <td><input type=button class="button medw" onmousedown="rightButtonDown=true;" onmouseup="rightButtonDown=false;" value="right"></td>
	  </tr>
	  <tr>

	    <td></td>
	    <td><input type=button class="button medw" onmousedown="reverseButtonDown=true;" onmouseup="reverseButtonDown=false;" value="reverse"></td>
	    <td></td>
	  </tr>
	</table>

</div> 
  <div id="earthDiv" class="x-hidden">
 	<div class="x-window-header">Hello Dialog</div>
  	</div>
</body>
</html>